// 导入React
import React from 'react';
// 导入样式文件
import '@/assets/css/login.module.css';

// 当前页面的组件
const Login = () =>
{
    // 页脚组件,用于登录提交
    const Footer = () =>
    {
        // 提交按钮
        return (
            // 使用React UI的Button组件,block属性使按钮宽度占满父容器
            <React.UI.Button block type='submit' color='primary' size='large'>
                注册登录
            </React.UI.Button>
        )
    }

    // 组装数据
    const OnSubmit = async (value:{
        mobile:string,
        password:string
    }) =>
    {
        // 提交发起请求
        const result = await React.Http.post('/business/login',value);

        // 处理返回的数据
        if(result.code === 1)
        {
            React.success(result.msg,() =>
            {
                // 把登录信息存储cookie
                React.Cookies.save('business',result.data,{path:'/'});

                React.business = result.data;
            
                React.navigate(result.url);
            });
        }else{
            React.fail(result.msg);
        }
    }

    // 渲染数据
    return (
        <>
            <div className="login">
                {/* 
                // 调用React.UI的Form组件,用于表单处理
                // footer属性用于设置表单的底部内容,这里使用了Footer组件
                */}
                <React.UI.Form
                    onFinish={OnSubmit}
                    footer={<Footer />}
                >
                    {/* 
                    // Form.Item用于表单项的定义,Item为Form的子组件
                    // required属性为true表示该表单项为必填项
                    // pattern属性用于定义正则表达式验证规则
                    */}
                    <React.UI.Form.Item
                        name='mobile'
                        label='手机号'
                        rules={[
                            { required: true, message: '手机号不能为空' },
                            { pattern: /^1[3-9]\d{9}$/,message: '手机号格式错误'}
                        ]}
                    >
                        {/* Input组件 */}
                        <React.UI.Input placeholder='请输入手机号' />
                    </React.UI.Form.Item>

                    {/* 
                    // Form.Item用于表单项的定义,Item为Form的子组件
                    // required属性为true表示该表单项为必填项
                    // pattern属性用于定义正则表达式验证规则
                    */}
                    <React.UI.Form.Item
                        name='password'
                        label='密码'
                        rules={[
                            { required: true, message: '密码不能为空' }
                        ]}
                    >
                        <React.UI.Input type="password" placeholder='请输入密码' />
                    </React.UI.Form.Item>
                </React.UI.Form>
            </div>
        </>
    )
}

// 导出Login组件
export default Login;